<template>
  <div class="course">
    <Nav
      class="course-back"
      backTitle="临时调课"
    />

    <SelectStudent
      :dataList="studentList"
      :currentSelect="currentStudent"
      listType="student"
      @changeSelect="changeStudent"
    ></SelectStudent>

    <ul
      v-if="courseList.length"
      class="course-list"
    >
      <li
        class="cart-li"
        v-for="(item,index) in courseList"
        v-if="item"
      >
        <div class="course-select">
          <span>
            <input
              type="radio"
              name="course"
              v-model="selectedCourseId"
              :value="item.courseClass.classId"
            >
            <label></label>
          </span>
        </div>
        <div
          class="course-detail"
          @click="checkedContent(item)"
        >
          <course-message
            :showTeacher="true"
            :item="item.courseClass"
            :hasAddress="true"
            :hasPeriodNo="false"
          />
        </div>
      </li>
    </ul>
    <empty
      :text="studentList.length ? '当前尚无可调课的课程' : '当前尚无可调课的学员'"
      v-show="showEmpty || studentList.length === 0"
    />
    <div
      v-show="studentList.length"
      class="icon-next"
      @click="handleNext"
    >下一步</div>
  </div>
</template>

<script>
import Nav from 'components/nav/nav.vue'
import CourseMessage from 'components/course/courseMessage.vue'
import Empty from 'components/empty.vue'
import SelectStudent from 'components/select/select.vue'
import api from 'util/xhr'
import { mapState, mapActions } from 'vuex'

export default {
  components: {
    Nav,
    CourseMessage,
    Empty,
    SelectStudent
  },
  data() {
    return {
      courseList: [],
      pageNo: 1,
      pageSize: 10,
      hasNext: true,
      showId: '',
      selectedCourseId: '',
      showEmpty: false,
      showName: ''
    }
  },
  watch: {},
  created() {
    if (this.studentList.length > 0) {
      this.course()
    } else {
      this.loadStudent().then(() => {
        this.course()
      })
    }
  },
  computed: {
    ...mapState({
      studentList: state => {
        return state.studentList
      },
      currentStudent: state => {
        return state.currentStudent
      }
    })
  },
  methods: {
    ...mapActions({
      loadStudent: 'loadStudent'
    }),
    checkedContent(item) {
      this.selectedCourseId = item.courseClass.classId
    },
    changeStudent({ studentId, studentName }) {
      this.courseList = []
      this.course(studentId)
    },
    handleNext() {
      if (!this.selectedCourseId) {
        this.$alert({ content: '请选择课程！' })
        return
      }
      let courseInfo = {}
      this.courseList.map(val => {
        if (
          val.courseClass &&
          this.selectedCourseId === val.courseClass.classId
        ) {
          courseInfo.classId = val.courseClass.classId
          courseInfo.className = val.courseClass.className
          courseInfo.gradeName = val.courseClass.gradeName
          courseInfo.periodName = val.courseClass.periodName
          courseInfo.startCourseTime = val.courseClass.startCourseTime
          courseInfo.endCourseTime = val.courseClass.endCourseTime
          courseInfo.timeInterval = val.courseClass.timeInterval
          courseInfo.studyingTime = val.courseClass.studyingTime
          courseInfo.campusName = val.courseClass.campusName
          courseInfo.teacherName = val.courseClass.teacherName
          courseInfo.studyingFee = val.courseClass.studyingFee
          courseInfo.regId = val.studentReg.regId
        }
      })

      this.isAccord(courseInfo)
    },
    isAccord(courseInfo) {
      api
        .post('/api/m/checkCanShift', {
          classId: this.selectedCourseId,
          studentId: this.currentStudent.studentId
        })
        .then(
          data => {
            this.$router.push(
              '/select-lecture?courseInfo=' +
                JSON.stringify(courseInfo) +
                '&studentName=' +
                this.currentStudent.studentName
            )
          },
          desc => {
            this.$alert({ content: desc })
          }
        )
    },
    course(studentId) {
      api
        .post('/api/m/availableShiftOutCourseClasses', {
          studentId: studentId || this.currentStudent.studentId
        })
        .then(data => {
          this.courseList = data
          this.showEmpty = !this.courseList.length
        })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.selectStudent {
  width: 100%;
  height: 96px;
  padding: 0 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  border-bottom: 1px solid #e8e8e8;
}
.selectTxt {
  font-size: 28px;
}
.course {
  background: #f8f8f8;
  height: auto;
  min-height: 100%;
  /* padding-top: .2rem; */
  width: 100%;
  float: left;
  clear: both;
}
.adjust-class {
  position: relative;
  .course-list {
    padding-bottom: 170px;
  }
  .wornWarmimg {
    position: absolute;
    bottom: 120px;
    left: 0;
    padding: 0 30px;
    font-size: 28px;
    color: #666;
  }
}
.course-back {
  position: relative;
  // top: -.2rem;
}

.course-list {
  overflow-y: scroll;
  padding-bottom: 100px;
}
.course-list li {
  background: white;
  width: 100%;
  display: flex;
  padding: 0;
  position: relative;
  margin: 20px 0;
}

.course-select {
  display: inline-block;
  width: 15%;
  text-align: center;
  vertical-align: top;
}

.course-select span {
  position: absolute;
  top: 50%;
  margin-top: -18px;
  left: 32px;
  transform: translateY(-50%);
}

.course-select input {
  width: 126px;
  height: 250px;
  position: absolute;
  opacity: 0;
  transform: translateX(-50%) translateY(-45%);
}

.course-select label {
  display: inline-block;
  width: 36px;
  height: 36px;
  background-image: url(../assets/img/choose_empty@3x.png);
  background-size: 100% 100%;
}

.course-select input:checked + label {
  background-image: url(../assets/img/choose_blue@3x.png);
}

.course-detail {
  width: 85%;
}
.icon-next {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 88px;
  line-height: 88px;
  color: white;
  font-size: 36px;
  background: #3271f1;
  text-align: center;
}
</style>
